<template>
  <div class="main">
    <i class="iconfont iconyue"></i>
    <p>我的余额</p>
    <p>
      ￥
      <md-amount :value="parseFloat(userInfo.money)" has-separator></md-amount>
      元
    </p>
    <md-button
      type="primary"
      class="withdrawBtn"
      round
      @click="$commonJs.goPage('personWithdraw')"
      >提现</md-button
    >
  </div>
</template>

<script>
import { Amount, Button } from "mand-mobile";
import { mapState } from "vuex";
export default {
  name: "login",
  components: {
    [Amount.name]: Amount,
    [Button.name]: Button
  },
  computed: {
    ...mapState(["userInfo"])
  },
  mounted() {
    this.$ajax
      .post(this.$api.getMoney)
      .then(res => {
        this.$store.dispatch("changeUserMoney", res.data.money);
      })
      .catch(err => {
        this.$toast.failed(err);
      });
  }
};
</script>

<style scoped lang="stylus">
.main{
  height 100%;
  box-sizing border-box
  background white
  padding-top 104px;
  text-align center;
}
.main>i{
  font-size 142px;
  color #317EB9;
}
.main>p:nth-of-type(1){
  font-size 26px;
  color #666666;
  margin-top 24px;
  margin-bottom 23px;
}
.main>p:nth-of-type(2){
  font-size 48px;
  color #ED721B;
}
.withdrawBtn{
  margin 63px auto;
  width: 346px;
  height: 70px;
  font-size 28px
  background-color :#317EB9;
}
.md-button.primary::after{
  border none;
}
</style>
